{% extends "base/base.html" %}
{% load bootstrap_pagination %}

{% block title %}杨学峰博客 | 首页{% endblock %}

{% block banner %}
<section class="container top-slider">
  <div class="col-md-12">
    <div class="swiper-container hidden-xs" style="border-radius:5px">
      <div class="swiper-wrapper">
        {% for img in carouse_imgs %}
          <div class="swiper-slide">
            <a href="{{ img.link|default:'javascript:;' }}">
              <img src="{{ img.path }}" alt="{{ img.description }}" height="500px;" />
            </a>
          </div>
        {% endfor %}
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</section>
{% endblock %}

{% block content %}
<div class="col-md-9">
  {% for article in articles %}
  <div class="blog-post">
    <div class="blog-post-wrapper">
      <div class="blog-post__info blog-post__info--top">
        <span><a href="{% url 'classfiDetail' classfi=article.classification %}">{{ article.classification }}</a></span>
      </div>
      <div class="blog-post__title">
        <h2><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></h2>
      </div>
      <div class="blog-post__info">
        <span>By <a href="#">{{ article.author }}</a></span>
        <span>{{ article.publish_time|date:'Y年m月d日' }}</span>
        <span><a href="#">{{ article.count }} Readers</a></span>
      </div>
    </div>
    <!--<div class="blog-post__image">
      <a href="single-post.html"><img src="/static/img/img0.jpg" alt="Why Glass Had Been So Popular Till Now?"></a>
    </div>-->
    <div class="blog-post-wrapper">
      <div class="blog-post__content">
        {{ article.content|truncatewords_html:20|safe }}
      </div>
      <div class="blog-post__footer">
        <a class="blog-post__footer-link" href="{{ article.get_absolute_url }}">阅读全文</a>
      </div>
    </div>
  </div>
  {% endfor %}
  <div class="paginate">
    {% bootstrap_paginate articles url_extra_args=params range=5 show_first_last="true" %}
  </div>
</div>
{% endblock %}

{% block js %}
  <script>
    $(function(){
      var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项
        autoplay: true,  // 自动切换
        autoplay: {
          disableOnInteraction: false,
        },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable :true, // 导航按钮可以点击
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
    });
  </script>
{% endblock %}
